<template>
	<view class="cu-page album-detail-page">
	    <view class="nav-left cu-flex-center" :style="{width:menuButtonInfo.height+4+'px',height:menuButtonInfo.height+4+'px',top:menuButtonInfo.top+'px'}">
	        <image class="back-icon" @tap="goBack" mode="aspectFit" src="../../static/icons/navback.png"></image>
	    </view>
	    <view class="top-image-box" :style="{backgroundImage:`url(${bgImage})`}">
	        <view class="top-image-content">
	            <header-title :openType="canIuseUserInfo?'':'getUserInfo'" :optionIcon="album.like?'../../static/icons/zan1.png':'../../static/icons/zan0.png'" :optionText="album.like_num" :subtitle="album.introduce||''" :title="album.name"></header-title>
	        </view>
	    </view>
	    <waterfall-wallpaper-list :list="album.imageList" :wallpaperList="true"></waterfall-wallpaper-list>
	    <cu-end-empty></cu-end-empty>
	</view>
</template>

<script>
	import headerTitle from '../../components/header-title/header-title.vue'
	import cuEndEmpty from '../../components/cu-end-empty/cu-end-empty.vue'
	import waterfallWallpaperList from '../../components/waterfall-wallpaper-list/waterfall-wallpaper-list.vue'
	export default {
		data() {
			return {
				query: {
					page: 0,
					size: 30
				},
				album: null,
				albumId: "",
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				canIuseUserInfo: !1
			}
		},
		onLoad:function(){
			console.log('进入专辑页')
			uni.request({
			    url: this.$globals.siteUrl+'/zj.php', //仅为示例，并非真实接口地址。
			    success: (res) => {
					console.log("request success")
					console.log(res.data)
					var resData = res.data
					if(resData.success && resData.data.code == 200){
						this.album = resData.data.data
					}
					
					console.log(this.album)
			    }
			});
		},
		methods: {
			goBack:function(){
				uni.navigateBack()
			}
		},
		components:{
			headerTitle,cuEndEmpty,waterfallWallpaperList
		},
		computed: {
			bgImage: function() {
				if (this.album){
					var b = this.album.banner_list && this.album.banner_list.length > 0 ? this.album.banner_list[0].url : this.album.imageList[0].detailUrl;
					console.log(b)
					return b
				}
			}
		},
	}
</script>

<style scoped>
.nav-left {
    position: fixed;
    left: 20rpx;
}

.nav-left .back-icon {
    width: 80%;
    height: 80%;
}

.top-image-box {
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 750rpx;
    height: 590rpx;
}

.top-image-content {
    width: 750rpx;
    height: 590rpx;
    background-image: linear-gradient(0deg,#141414,rgba(20,20,20,0));
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
}
</style>
